<template>
  <view>
     <uni-nav-bar title="设计" height="175rpx" :border="false" @clickLeft="clickLeft" @clickRight="clickRight">
      <template v-slot:left>
        <view>
          <uni-icons type="back" color="#666" size="18" />
        </view>
      </template>
      <template v-slot:right>
        <view class="img">
          <image src="../../static/prebook/fenxiang.png" mode=""></image>
        </view>
      </template>
     </uni-nav-bar>
     <view class="navbarborder"></view>
     <view class="content">
       <view class="main">
         <view class="list">
           <view class="card">
             <view class="header">
               <view class="left">
                 <view class="tag">住宅</view>
                 <view class="name">陈先生</view>
               </view>
               <view class="right">1~2盆</view>
             </view>
             <view class="middle">
               <view class="left">设计师：</view>
               <view class="right">未指派</view>
               <view class="left">预约日期：</view>
               <view class="right">2023-03-16</view>
               <view class="left">预约时间：</view>
               <view class="right">11:00~15:00</view>
               <view class="left">优惠劵：</view>
               <view class="right">抖音团购券满500减100</view>
               <view class="left">备注：</view>
               <view class="right" style="height: 100%;">备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注</view>
             </view>
             <view class="bottom">
               <view class="left">
                 <text>客户城市</text>
                 <text class="blue">(佛山市)</text>
               </view>
               <view class="right">切换城市</view>
             </view>
           </view>
         </view>
         <view class="list2">
           <view class="card">
             <view class="header">
               <view class="left">
                 <view class="name">摆放场景图</view>
               </view>
             </view>
             <view class="middle">
                <u-upload :action="action" :file-list="fileList" ></u-upload>
             </view>
           </view>
         </view>
         <view class="list3">
           <view class="card">
             <view class="header">
               <view class="left">
                 <view class="name">位置信息</view>
               </view>
               <view class="right">
                 <view class="box">
                   <view class="img">
                     <image src="../../static/prebook/pingmiantu.png" mode=""></image>
                   </view>
                   <view class="text">
                     平面图
                   </view>
                 </view>
                 <view class="box">
                   <view class="img">
                     <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                   </view>
                   <view class="text">
                     增加场景
                   </view>
                 </view>
                 <view class="box">
                   <view class="img">
                     <image src="../../static/prebook/zengjiaquyu.png" mode=""></image>
                   </view>
                   <view class="text">
                     增加区域
                   </view>
                 </view>
               </view>
             </view>
             <view class="middle">
               <view class="card">
                 <view class="header">
                   <view class="left">
                     <view class="name">市场部(15)</view>
                   </view>
                   <view class="right">
                     <view class="box">
                       <view class="img">
                         <image src="../../static/prebook/pingmiantu.png" mode=""></image>
                       </view>
                       <view class="text">
                         平面图
                       </view>
                     </view>
                     <view class="box">
                       <view class="img">
                         <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                       </view>
                       <view class="text">
                         增加场景
                       </view>
                     </view>
                     <view class="box">
                       <view class="img">
                         <image src="../../static/prebook/zengjiaquyu.png" mode=""></image>
                       </view>
                       <view class="text">
                         增加区域
                       </view>
                     </view>
                   </view>
                 </view>
                 <view class="listitem">
                   <view class="header">
                     <view class="left">
                       <view class="name">休息室(2)</view>
                     </view>
                     <view class="right">
                       <view class="box">
                         <view class="img">
                           <image src="../../static/prebook/pingmiantu.png" mode=""></image>
                         </view>
                         <view class="text">
                           平面图
                         </view>
                       </view>
                       <view class="box">
                         <view class="img">
                           <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                         </view>
                         <view class="text">
                           增加场景
                         </view>
                       </view>
                       <view class="box">
                         <view class="img">
                           <image src="../../static/prebook/zengjiaquyu.png" mode=""></image>
                         </view>
                         <view class="text">
                           增加区域
                         </view>
                       </view>
                     </view>
                   </view>
                   <!-- 图片 -->
                   <view class="middle">
                     <view class="view">
                       <view class="img">
                         <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                         <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                       </view>
                       <view class="text">
                          <view>饮水机旁</view>
                          <view class="icon">
                            <image src="../../static/prebook/xiugai2.png" mode=""></image>
                          </view>
                       </view>
                     </view>
                     <view class="view">
                       <view class="img">
                         <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                         <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                       </view>
                       <view class="text">
                         <view>冰箱旁</view>
                         <view class="icon">
                           <image src="../../static/prebook/xiugai2.png" mode=""></image>
                         </view>
                       </view>
                     </view>
                   </view>
                 </view>
                 
                 <view class="listitem">
                   <view class="header">
                     <view class="left">
                       <view class="name">V01室(2)</view>
                     </view>
                     <view class="right">
                       <view class="box">
                         <view class="img">
                           <image src="../../static/prebook/pingmiantu.png" mode=""></image>
                         </view>
                         <view class="text">
                           平面图
                         </view>
                       </view>
                       <view class="box">
                         <view class="img">
                           <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                         </view>
                         <view class="text">
                           增加场景
                         </view>
                       </view>
                       <view class="box">
                         <view class="img">
                           <image src="../../static/prebook/zengjiaquyu.png" mode=""></image>
                         </view>
                         <view class="text">
                           增加区域
                         </view>
                       </view>
                     </view>
                   </view>
                   <!-- 图片 -->
                   <view class="middle">
                     <view class="view">
                       <view class="img">
                         <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                         <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                       </view>
                       <view class="text">
                          <view>餐桌上</view>
                          <view class="icon">
                            <image src="../../static/prebook/xiugai2.png" mode=""></image>
                          </view>
                       </view>
                     </view>
                     <view class="view">
                       <view class="img">
                         <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                         <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                       </view>
                       <view class="text">
                         <view>小阳台</view>
                         <view class="icon">
                           <image src="../../static/prebook/xiugai2.png" mode=""></image>
                         </view>
                       </view>
                     </view>
                   </view>
                 </view>
               </view>
             </view>
           </view>
         </view>
         <view class="list4">
           <view class="card">
             <view class="header">
               <view class="left">
                 <view class="name">设计方案</view>
               </view>
               <view class="right">
                 <image src="../../static/prebook/zengjiaquyu.png" mode=""></image>
               </view>
             </view>
             <view class="middle">
                <view class="view">
                  <view class="img">
                    <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                    <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                  </view>
                  <view class="text">
                     <view>小清新活泼风格设计方案</view>
                     <view class="icon">
                       <image src="../../static/prebook/xiugai2.png" mode=""></image>
                     </view>
                  </view>
                </view>
                <view class="view">
                  <view class="img">
                    <image class="close" src="../../static/prebook/guanbi.png" mode=""></image>
                    <image src="../../static/prebook/zengjiachangjing.png" mode=""></image>
                  </view>
                  <view class="text">
                     <view>小清新活泼风格设计方案</view>
                     <view class="icon">
                       <image src="../../static/prebook/xiugai2.png" mode=""></image>
                     </view>
                  </view>
                </view>
             </view>
           </view>
         </view>
         <view class="footer">
           <view class="img">
             <image src="../../static/prebook/baisebaocun.png" mode=""></image>
           </view>
         </view>
       </view>
     </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'

  const clickLeft = () => {
    console.log('clickLeft',)
  }
  const clickRight = () => {
    console.log('clickRight',)
  }
  const action = ref('http://www.example.com/upload')
  const fileList = ref([{
    url: 'https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1678035600&t=3bc1ca76995dd635b10b7e1d5d648cfa',
  }])
</script>

<style lang="scss" scoped>
  page {
    background-color: #fff;
  }
  .img{
    width: 40rpx;
    height: 40rpx;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .navbarborder{
    height: 0;
    border-top: 2rpx solid #EEEEEE;
  }
  .content{
    padding: 10rpx;
    .main{
      width: 100%;
      background-color: #fff;
      height: 100%;
      .list{
        width: 100%;
        height: 100%;
        .card{
          width: 100%;
          min-height: 400rpx;
          background-color: #fff;
          padding: 20rpx;
          padding-top: 0;
          .header{
            width: 100%;
            height: 80rpx;
            display: flex;
            justify-content: space-between;
            border-bottom: 2rpx solid #EEEEEE;
            .left{
              display: flex;
              align-items: center;
              .tag{
                background-color: rgb(255,159,91);
                border-radius: 10rpx;
                color: #fff;
                text-align: center;
                font-size: 20rpx;
                font-weight: 600;
                padding: 5rpx 20rpx;
                margin-right: 20rpx;
              }
              .name{
                font-size: 30rpx;
                font-weight: 600;
              }
            }
            .right{
              line-height: 100rpx;
              font-size: 20rpx;
            }
          }
          .middle{
            width: 100%;
            margin-top: 20rpx;
            display: flex;
            flex-wrap: wrap;
            .left{
              width: 20%;
              text-align: left;
              font-size: 18rpx;
              height: 40rpx;
              line-height: 40rpx;
            }
            .right{
              width: 80%;
              font-size: 18rpx;
              height: 40rpx;
              line-height: 40rpx;
            }
          }
          .bottom{
            width: 100%;
            display: flex;
            justify-content: space-between;
            .left{
              text-align: left;
              font-size: 18rpx;
              height: 40rpx;
              line-height: 40rpx;
              .blue{
                margin-left: 20rpx;
                color: rgb(0,157,255);
              }
            }
            .right{
              font-size: 18rpx;
              height: 40rpx;
              line-height: 40rpx;
              font-weight: 700;
            }
          }
        }
      }
      .list2{
        width: 100%;
        height: 100%;
        .card{
          width: 100%;
          min-height: 400rpx;
          background-color: #fff;
          padding: 20rpx;
          padding-top: 0;
          .header{
            width: 100%;
            height: 80rpx;
            display: flex;
            justify-content: space-between;
            border-bottom: 2rpx solid #EEEEEE;
            .left{
              display: flex;
              align-items: center;
              .name{
                font-size: 30rpx;
                font-weight: 600;
              }
            }
          }
          .middle{
            width: 100%;
            margin-top: 20rpx;
          }
        }
      }
      .list3{
        width: 100%;
        height: 100%;
        .card{
          width: 100%;
          min-height: 400rpx;
          background-color: #fff;
          padding: 20rpx;
          padding-top: 0;
          .header{
            width: 100%;
            height: 80rpx;
            display: flex;
            justify-content: space-between;
            border-bottom: 2rpx solid #EEEEEE;
            .left{
              display: flex;
              align-items: center;
              .name{
                font-size: 30rpx;
                font-weight: 600;
              }
            }
            .right{
              display: flex;
              align-items: center;
              justify-content: center;
              .box{
                border: 2rpx solid grey;
                display: flex;
                padding: 10rpx;
                margin-left: 10rpx;
                .img{
                  width: 20rpx;
                  height: 20rpx;
                  display: flex;
                  align-items: center;
                  image{
                    width: 100%;
                    height: 100%;
                  }
                }
                .text{
                  height: 20rpx;
                  line-height: 20rpx;
                  font-size: 20rpx;
                }
              }
              
            }
          }
          .middle{
            width: 100%;
            margin-top: 20rpx;
            border: 2rpx solid #EEEEEE;
            .card{
              width: 100%;
              padding: 0;
              .header{
                box-shadow: 0 0 5rpx 5rpx #EEEEEE;
                padding: 0 10rpx;
                width: 100%;
                height: 80rpx;
                display: flex;
                justify-content: space-between;
                border-bottom: 2rpx solid #EEEEEE;
                .left{
                  display: flex;
                  align-items: center;
                  .name{
                    font-size: 30rpx;
                    font-weight: 600;
                  }
                }
                .right{
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  .box{
                    border: 2rpx solid grey;
                    display: flex;
                    padding: 10rpx;
                    margin-left: 10rpx;
                    .img{
                      width: 20rpx;
                      height: 20rpx;
                      display: flex;
                      align-items: center;
                      image{
                        width: 100%;
                        height: 100%;
                      }
                    }
                    .text{
                      height: 20rpx;
                      line-height: 20rpx;
                      font-size: 20rpx;
                    }
                  }
                }
              }
              .listitem{
                width: 100%;
                padding: 10rpx;
                .header{
                  box-shadow:none;
                  padding: 0 10rpx;
                  width: 100%;
                  height: 80rpx;
                  display: flex;
                  justify-content: space-between;
                  .left{
                    display: flex;
                    align-items: center;
                    .name{
                      font-size: 30rpx;
                      font-weight: 600;
                    }
                  }
                  .right{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    .box{
                      border: 2rpx solid grey;
                      display: flex;
                      padding: 10rpx;
                      margin-left: 10rpx;
                      .img{
                        width: 20rpx;
                        height: 20rpx;
                        display: flex;
                        align-items: center;
                        image{
                          width: 100%;
                          height: 100%;
                        }
                      }
                      .text{
                        height: 20rpx;
                        line-height: 20rpx;
                        font-size: 20rpx;
                      }
                    }
                  }
                }
                .middle{
                  display: flex;
                  flex-wrap: wrap;
                  width: 100%;
                  justify-content: space-between;
                  border:none;
                  .view{
                    width: 300rpx;
                    height: 300rpx;
                    // border: 1rpx solid red;
                    .img{
                      width: 300rpx;
                      height: 250rpx;
                      position: relative;
                      image{
                        width: 100%;
                        height: 100%;
                      }
                      .close{
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 30rpx;
                        height: 30rpx;
                        border: 1rpx solid red;
                      }
                    }
                    .text{
                      width: 300rpx;
                      height: 50rpx;
                      line-height: 50rpx;
                      text-align: center;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      .icon{
                        width: 30rpx;
                        height: 30rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        image{
                          width: 100%;
                          height: 100%;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .list4{
        width: 100%;
        height: 100%;
        .card{
          width: 100%;
          min-height: 400rpx;
          background-color: #fff;
          padding: 20rpx;
          padding-top: 0;
          .header{
            width: 100%;
            height: 80rpx;
            display: flex;
            justify-content: space-between;
            border-bottom: 2rpx solid #EEEEEE;
            .left{
              display: flex;
              align-items: center;
              .name{
                font-size: 30rpx;
                font-weight: 600;
              }
            }
            .right{
              height: 80rpx;
              width: 80rpx;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              image{
                width: 50%;
                height: 50%;
              }
            }
          }
          .middle{
            width: 100%;
            margin-top: 20rpx;
            .view{
              width: 680rpx;
              height: 550rpx;
              // border: 1rpx solid red;
              margin: 0 auto;
              .img{
                width: 680rpx;
                height: 550rpx;
                position: relative;
                image{
                  width: 100%;
                  height: 100%;
                }
                .close{
                  position: absolute;
                  top: 0;
                  right: 0;
                  width: 30rpx;
                  height: 30rpx;
                  border: 1rpx solid red;
                }
              }
              .text{
                width: 680rpx;
                height: 50rpx;
                line-height: 50rpx;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                .icon{
                  width: 30rpx;
                  height: 30rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  image{
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
        }
      }
      .footer{
        position: fixed;
        left: 50rpx;
        bottom: 50rpx;
        background-color: rgb(96,205,182);
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        .img{
          width: 50rpx;
          height: 50rpx;
          image{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>